<template>
	<transition name="el-fade-in-linear">
		<router-view v-if="isRouterAlive" />
	</transition>
</template>

<style>
.el-table th.gutter {
	display: table-cell !important;
}
</style>
<script>
import Cookies from 'js-cookie'
import {
	messages
} from '@/i18n'
export default {
	provide() {
		return {
			reload: this.reload
		};
	},
	data() {
		return {
			ws: null, //psc的websocet
			ws1: null, //dcu的websocet
			timeout: 10 * 1000, // 10秒一次心跳
			timeoutObj: null, // 心跳心跳倒计时
			serverTimeoutObj: null, // 心跳倒计时
			timeoutnum: null, // 断开 重连倒计时
			lockReconnect: false, // 防止
			routerVisible: true,
			isRouterAlive: true,
			timerefesh:new Date().getSeconds(),
		}
	},
	watch: {
		'$i18n.locale': 'i18nHandle',
		'$route.path': 'initWebSocket',
		$route(to, from) {
			if (from.path == '/') {
				this.routerVisible = true //原页面刷新走重连机制
			} else {
				this.routerVisible = false //切换页面不走重连机制
			}
			let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
		},
		"timerefesh"(){
		}
	},
	created() {
		this.i18nHandle(this.$i18n.locale)
	},
	mounted() {
		this.interval = setInterval(() => {
      this.timerefesh = new Date().getSeconds();
    }, 1000);

	},
			beforeDestroy() {
    	clearInterval(this.interval);
  		},
	methods: {
		reload() {
			this.isRouterAlive = false;
			this.$nextTick(function () {
				this.isRouterAlive = true;
			});
		},
		i18nHandle(val, oldVal) {
			Cookies.set('language', val)
			document.querySelector('html').setAttribute('lang', val)
			document.title = Cookies.get('systemname') ? Cookies.get('systemname') : messages[val].brand.lg
			// 非登录页面，切换语言刷新页面
			if (this.$route.name !== 'login' && oldVal) {
				window.location.reload()
			}
		},
		// 生成随机数
		random() {
			const _charStr = 'abacdefghjklmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ0123456789';
			const RandomIndex = (min, max, i) => {
				let index = Math.floor(Math.random() * (max - min + 1) + min),
					numStart = _charStr.length - 10;
				if (i == 0 && index >= numStart) {
					index = RandomIndex(min, max, i);
				}
				return index;
			}
			const getRandomString = (length) => {
				let min = 0,
					max = _charStr.length - 1,
					_str = '';
				//判断是否指定长度，否则默认长度为15
				length = length || 15;
				//循环生成字符串
				for (var i = 0, index; i < length; i++) {
					index = RandomIndex(min, max, i);
					_str += _charStr[index];
				}
				return _str;
			}
			const isJson = (str) => {
				if (typeof str == 'string') {
					try {
						JSON.parse(str)
						return true
					} catch (e) {
						return false
					}
				}
			}
			const id = getRandomString(18)
			return id;
		},
		//全局socket
		initWebSocket() {
			let that = this;
			let path = that.$router.history.current.path;
			if ("WebSocket" in window) {
				if (that.ws) {
					that.ws.close();
				}
				if (that.ws1) {
					that.ws1.close();
				}
				if (path === '/home-index' || path === '/relay-index' || path === '/setting-PEDCSetting'|| path === '/sysFault-index' || path === '/lcb-index'){
					that.ws = new WebSocket(window.SITE_CONFIG['websoketURL'] + '?uuid=' + this.random());
					that.$globalWebSocket.setWs(that.ws);
					that.ws.onopen = this.websocketonopen;
					that.ws.onerror = this.websocketonerror;
					that.ws.onmessage = this.setOnmessageMessage;
					that.ws.onclose = this.websocketclose
				} else if (path === '/doorInfo/index') {
					that.ws = new WebSocket(window.SITE_CONFIG['websoketURL'] + '?uuid=' + this.random());
					that.$globalWebSocket.setWs(that.ws);
					that.ws1 = new WebSocket(window.SITE_CONFIG['websoketDCUURL'] + '?uuid=' + this.random());
					that.$globalWebSocket.setWs(that.ws, that.ws1);
					that.ws.onopen = this.websocketonopen;
					that.ws.onerror = this.websocketonerror;
					that.ws.onmessage = this.setOnmessageMessage;
					that.ws.onclose = this.websocketclose;

					that.ws1.onopen = this.websocketonopen;
					that.ws1.onerror = this.websocketonerror;
					that.ws1.onmessage = this.setOnmessageMessageDCU;
					that.ws1.onclose = this.websocketclose;

				} else if (path === '/oper-index') {
					that.ws1 = new WebSocket(window.SITE_CONFIG['websoketDCUURL'] + '?uuid=' + this.random());
					that.$globalWebSocket.setWs(that.ws, that.ws1);
					that.ws1.onopen = this.websocketonopen;
					that.ws1.onerror = this.websocketonerror;
					that.ws1.onmessage = this.setOnmessageMessageDCU;
					that.ws1.onclose = this.websocketclose;
				}else if(path === '/setting-sysParam'){
					that.ws = new WebSocket(window.SITE_CONFIG['websoketURL'] + '?uuid=' + this.random());
					that.$globalWebSocket.setWs(that.ws);
					that.ws1 = new WebSocket(window.SITE_CONFIG['websoketDCUURL'] + '?uuid=' + this.random());
					that.$globalWebSocket.setWs(that.ws, that.ws1);
					
					that.ws.onopen = this.websocketonopen;
					that.ws.onerror = this.websocketonerror;
					that.ws.onmessage = this.setOnmessageMessage;
					that.ws.onclose = this.websocketclose;
					
					that.ws1.onopen = this.websocketonopen;
					that.ws1.onerror = this.websocketonerror;
					that.ws1.onmessage = this.setOnmessageMessageDCU;
					that.ws1.onclose = this.websocketclose;
				}else{
					that.ws = new WebSocket(window.SITE_CONFIG['websoketURL'] + '?uuid=' + this.random());
					that.$globalWebSocket.setWs(that.ws);
					that.ws.onopen = this.websocketonopen;
					that.ws.onerror = this.websocketonerror;
					that.ws.onmessage = this.setOnmessageMessage;
					that.ws.onclose = this.websocketclose
					that.ws1 = new WebSocket(window.SITE_CONFIG['websoketDCUURL'] + '?uuid=' + this.random());
					that.$globalWebSocket.setWs(that.ws, that.ws1);
					that.ws1.onopen = this.websocketonopen;
					that.ws1.onerror = this.websocketonerror;
					that.ws1.onmessage = this.setOnmessageMessageDCU;
					that.ws1.onclose = this.websocketclose;
				}
			} else {
				// 浏览器不支持 WebSocket
				console.log("您的浏览器不支持 WebSocket!");
			}

		},
		start() {
			//清除延时器
			this.timeoutObj && clearTimeout(this.timeoutObj);
			this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
			this.timeoutObj = setTimeout(() => {
				if (this.ws && this.ws.readyState == 1) {
					this.ws.send('PSC'); //发送消息，服务端返回信息，即表示连接良好，可以在socket的onmessage事件重置心跳机制函数
				} else if (this.ws1 && this.ws1.readyState == 1) {
					this.ws1.send('DCU'); //发送消息，服务端返回信息，即表示连接良好，可以在socket的onmessage事件重置心跳机制函数
				}
				else {
					this.reconnect();
				}
				// //定义一个延时器等待服务器响应，若超时，则关闭连接，重新请求server建立socket连接
				// this.serverTimeoutObj = setTimeout(() => {
				// 	this.ws.close();
				// }, this.timeout)
			}, this.timeout)
		},
		reset() { // 重置心跳
			// 清除时间
			clearTimeout(this.timeoutObj);
			clearTimeout(this.serverTimeoutObj);
			// 重启心跳
			this.start();

		},
		// 重新连接
		reconnect() {
			if (this.lockReconnect) return
			this.lockReconnect = true;
			//没连接上会一直重连，设置延迟避免请求过多
			this.timeoutnum && clearTimeout(this.timeoutnum);
			this.timeoutnum = setTimeout(() => {
				this.initWebSocket();
				this.lockReconnect = false;
			}, 5000)
		},
		async setOnmessageMessage(event) {
			this.reset();
			// 自定义全局监听事件
			window.dispatchEvent(new CustomEvent('onmessageWS', {
				detail: {
					data: event.data
				}
			}))
		},
		async setOnmessageMessageDCU(event) {
			this.reset();
			// 自定义全局监听事件
			window.dispatchEvent(new CustomEvent('onmessageWSDCU', {
				detail: {
					data: event.data
				}
			}))
		},
		websocketonopen() {
			//开启心跳
			this.start();
			if (this.ws) {
				console.log("WebSocket连接成功!!!" + new Date() + "----" + this.ws.readyState);
			}
			if (this.ws1) {
				console.log("WebSocket连接成功!!!" + new Date() + "----" + this.ws1.readyState);
			}
			this.routerVisible = true
		},
		websocketonerror(e) {
			console.log("WebSocket连接发生错误" + e);
		},
		websocketclose(e) {
			let that = this
			clearTimeout(this.timeoutObj);
			clearTimeout(this.serverTimeoutObj);
			console.log("WebSocket连接关闭");
			if (this.routerVisible) {
				this.reconnect();
			}
		},
		websocketsend(messsage) {
			this.ws.send(messsage)

		},
		closeWebSocket() { // 关闭websocket
			if (this.ws) {
				this.ws.close();
			}
			if (this.ws1) {
				this.ws1.close()
			}
		},


	}

}
</script>
<style>
body {
	min-width: 1800px;
	/* min-height: px; */
}

@media screen and (max-width:1200px) {
	/* .aui-content__wrapper{
			margin-left: 0!important;
		} */
}

/* 修改全局样式 */
.aui-navbar {
	background-color: #fff !important;

}

.aui-navbar__brand {
	font-size: 18px !important;
}

.aui-navbar__brand-lg,
.aui-navbar__brand-mini,
.el-dropdown {
	color: rgba(42, 130, 228, 1) !important;
}

.aui-navbar__brand-lg:focus,
.aui-navbar__brand-lg:hover,
.aui-navbar__brand-mini:focus,
.aui-navbar__brand-mini:hover {
	color: rgba(42, 130, 228, 1) !important;
}

.aui-navbar--colorful .aui-navbar__menu .el-menu-item i,
.aui-navbar--colorful .aui-navbar__menu .el-submenu__title i,
.aui-navbar--colorful .aui-navbar__menu .el-menu-item svg,
.aui-navbar--colorful .aui-navbar__menu .el-submenu__title svg,
.aui-navbar--colorful .aui-navbar__menu .el-menu-item .el-dropdown {
	color: rgba(42, 130, 228, 1) !important;
}

.aui-navbar--colorful .aui-navbar__menu>.el-menu-item,
.aui-navbar--colorful .aui-navbar__menu>.el-submenu>.el-submenu__title {
	color: rgba(42, 130, 228, 1) !important;
}

.aui-sidebar--dark .aui-sidebar__menu,
.aui-sidebar--dark>.el-menu--popup,
.aui-sidebar--dark {
	background-color: rgba(255, 255, 255, 1) !important;
}

.aui-sidebar--dark .aui-sidebar__menu .el-menu-item,
.aui-sidebar--dark .aui-sidebar__menu .el-submenu>.el-submenu__title,
.aui-sidebar--dark>.el-menu--popup .el-menu-item,
.aui-sidebar--dark>.el-menu--popup .el-submenu>.el-submenu__title {
	color: rgba(128, 128, 128, 1) !important;
}

.aui-sidebar--dark .aui-sidebar__menu .el-menu-item:focus,
.aui-sidebar--dark .aui-sidebar__menu .el-menu-item:hover,
.aui-sidebar--dark .aui-sidebar__menu .el-submenu>.el-submenu__title:focus,
.aui-sidebar--dark .aui-sidebar__menu .el-submenu>.el-submenu__title:hover,
.aui-sidebar--dark>.el-menu--popup .el-menu-item:focus,
.aui-sidebar--dark>.el-menu--popup .el-menu-item:hover,
.aui-sidebar--dark>.el-menu--popup .el-submenu>.el-submenu__title:focus,
.aui-sidebar--dark>.el-menu--popup .el-submenu>.el-submenu__title:hover {
	background: linear-gradient(90deg, rgba(179, 212, 255, 1) 0%, rgba(232, 242, 254, 0) 100%) !important;
}

.aui-sidebar--dark .aui-sidebar__menu .el-menu,
.aui-sidebar--dark .aui-sidebar__menu .el-submenu.is-opened,
.aui-sidebar--dark>.el-menu--popup .el-menu,
.aui-sidebar--dark>.el-menu--popup .el-submenu.is-opened {
	background-color: #fff !important;
}

.aui-sidebar--dark .aui-sidebar__menu .el-menu-item.is-active {
	color: rgba(66, 177, 255, 1) !important;
	background: linear-gradient(90deg, rgba(179, 212, 255, 1) 0%, rgba(232, 242, 254, 0) 100%) !important;
}

.aui-sidebar--dark .aui-sidebar__menu .el-menu-item.is-active:before {
	content: '';
	position: absolute;
	left: 0;
	width: 3px;
	height: 48px;
	background: rgba(66, 177, 255, 1);
}

.el-card {
	background-color: transparent !important;
	border: none !important;
}

.el-card__body {
	padding: 0 !important;
	background-color: transparent !important;
	border: none;
}

.aui-content--tabs-tools {
	background-color: rgba(245, 249, 252, 1) !important;
}

.aui-content--tabs {
	padding: 0 !important;
}

.aui-content--tabs-tools {
	display: none !important;
}

.aui-content>.el-tabs>.el-tabs__header {
	display: none;
}

.homePoper.el-popover {
	background: rgba(0, 0, 0, 0.6) !important;
	color: #fff !important;
}

.eventTime .el-time-spinner__wrapper {
	width: 50% !important;
}
.tip-model .el-message-box__container{
	max-height: 600px;
	overflow-y: auto;
}
.tip-model .el-icon-warning{
	display: none;
}
.el-select-dropdown__item.selected{
	font-weight:400!important;
}
@media screen and (max-width: 1280px) {

	.el-table th.is-leaf:last-child,
	.el-table td:last-child {
		border-left: 1px solid #EBEEF5;
	}
}
</style>
